layui.use(['element', 'form', 'jquery', 'layer', 'table', 'laydate'], function () {
    var element = layui.element;
    var form = layui.form;
    var $ = layui.jquery;
    var table = layui.table;
    var layer = layui.layer;
    var laydate = layui.laydate;

    //查询的时间组件
    laydate.render({
        elem : '#startDate'
    });

    laydate.render({
        elem : '#endDate'
    });

    //添加订单弹出层的时间组件
    laydate.render({
        elem : '#a_appointmentTime',
        type: 'datetime'    //既要年月日又要时分秒
    })

    //添加订单弹出层的时间组件
    laydate.render({
        elem : '#a_collectionTime',
        type : 'datetime'   //既要年月日又要时分秒
    })

    //修改订单弹出层的时间组件
    laydate.render({
        elem : '#e_collectionTime',
        type : 'datetime'   //既要年月日又要时分秒
    })

    //订单列表显示
    var tableData = table.render({
        elem: '#orders'
        , url: '/system/order/loadAllOrders'
        , page: true //开启分页
        , toolbar: true //开启头部工具栏，并为其绑定左侧模板
        , title: '订单表'
        , limits: [10, 20, 50, 100]
        , cols: [ [
            {field: 'orderId', title: '订单编号', sort: true, align: 'center'}
            , {field: 'orderNum', title: '订单流水号', align: 'center'}
            , {field: 'appointmentTime', title: '预约时间', align: 'center'}
            , {field: 'collectionTime', title: '上门时间', align: 'center'}
            , {field: 'orderStatic', title: '订单状态', align: 'center' , templet : function (d) {
                    return d.orderStatic == 1 ? "<span class='layui-badge layui-bg-orange'>待上门</span>" : "<span class='layui-badge layui-bg-green'>已完成</span>";
                }}
            , {field: 'checkMethod', title: '盘点方式', align: 'center' , templet : function (d) {
                        return d.checkMethod == 1 ? "<span class='layui-badge layui-bg-green'>公司分拣</span>" : "<span class='layui-badge layui-bg-green'>自己分拣</span>";
                }}
            , {field: 'extraRubbish', title: '是否有额外垃圾', align: 'center', templet : function (d) {
                    if (d.extraRubbish == 1){
                        return  "<span class='layui-badge layui-bg-green'>无</span>";
                    }
                    if (d.extraRubbish == 2){
                        return  "<span class='layui-badge layui-bg-orange'>有</span>";
                    }
                    if (d.extraRubbish == 3){
                        return  "<span class='layui-badge'>很多</span>";
                    }
                }}
            , {field: 'orderRemark', title: '订单备注', align: 'center'}
            , {field: 'userId', title: '订单所属业主ID', align: 'center'}
            , {field: 'empId', title: '订单回收员工ID', align: 'center'}
            , {fixed: 'right', title: '操作', toolbar: '#barDemo', align: 'center', width:'160'}
        ] ]
    });

    //执行查询
    form.on("submit(doSearch)", function (data) {
        tableData.reload({
            url: '/system/order/loadAllOrders',
            //where是将条件拼接在后面
            where: data.field
        })
        //返回数据时自动将输入框清空
        $('#orderId').val("");
        $('#orderNum').val("");
        $('#startDate').val("");
        $('#endDate').val("");
        //防止提交
        return false;
    })
    //查询事件结束

    //获取弹出层的索引
    var addIndex;
    //添加商家弹出层
    $('#doAdd').click(function () {
        addIndex = layer.open({
            type: 1,
            title: '添加订单',
            //content属性为打开某个定义好的
            content: $('#addOrderDiv'),
            area: ['800px', '650px'],
            //这个函数是防止打开弹窗后遮挡屏幕
            success: function (layer) {
                var mask = $(".layui-layer-shade");
                mask.appendTo(layer.parent());
                //其中：layer是弹层的DOM对象
                //每次打开弹出层时刷新内容
                $('#reloadFrame').click();
            }
        })
    });
    //添加订单事件结束

    //监控订单提交事件
    form.on("submit(doSubmit)", function (data) {
        //alert(data.field);
        $.post('/system/order/addOrder', data.field, function (res) {
            if (res.code == 200) {
                layer.confirm('是否继续录入？', {
                    btn: ['继续', '取消'] //按钮
                }, function (myself) {
                    //无论继续输入还是取消重置按钮会被点击
                    $('#reloadFrame').click();
                    layer.close(myself);
                }, function () {
                    //无论继续输入还是取消重置按钮会被点击
                    $('#reloadFrame').click();
                    layer.close(addIndex);
                });
            }
            //不管成功还是失败,父级页面都要刷新
            tableData.reload();
        });
        //要应用ajax提交,所以return false
        return false;
    });
    //提交事件结束

    //监听工具条的事件
    table.on('tool(orderTable)',function (obj) {
        //userTable是数据表格中lay-filter对应的事件
        var event = obj.event;
        var orderData = obj.data;
        switch (event) {
            case 'detailOrderById':
                console.log(orderData.orderId);
                $.post('/system/order/detailOrderById',orderData,function (res) {
                    console.log(res);
                    var orderDetail;
                    if (res.employee == null){
                        orderDetail = "<div style='margin: 40px;'>" +
                            "订单编号 : <span style='font-weight: bold;'>"+res.orderId+"</span><hr class='layui-bg-green'>"+
                            "订单流水号 : <span style='font-weight: bold;'>"+res.orderNum+"</span><hr class='layui-bg-green'>"+
                            "预约时间 : <span style='font-weight: bold;'>"+res.appointmentTime+"</span><hr class='layui-bg-green'>" +
                            "上门回收时间 : <span style='font-weight: bold;'>"+res.collectionTime+"</span><hr class='layui-bg-green'>"+
                            "订单状态 : <span style='font-weight: bold;'>"+res.orderStatic+"</span><hr class='layui-bg-green'>"+
                            "盘点方式 : <span style='font-weight: bold;'>"+res.checkMethod+"</span><hr class='layui-bg-green'>"+
                            "是否有额外垃圾 : <span style='font-weight: bold;'>"+res.extraRubbish+"</span><hr class='layui-bg-green'>"+
                            "订单备注 : <span style='font-weight: bold;'>"+res.orderRemark+"</span><hr class='layui-bg-green'><br><br>"+
                            "订单所属业主 : <span style='font-weight: bold;'>"+res.user['userName']+"</span><hr class='layui-bg-green'>"+
                            "业主住址 : <span style='font-weight: bold;'>"+res.user['areaAddress']+res.user['detailedAddress']+res.user['floorUnit']+ "</span><hr class='layui-bg-green'>"+
                            "业主联系方式 : <span style='font-weight: bold;'>"+res.user['userPhone']+"</span><hr class='layui-bg-green'><br><br>";
                    }else {
                        orderDetail = "<div style='margin: 40px;'>" +
                            "订单编号 : <span style='font-weight: bold;'>"+res.orderId+"</span><hr class='layui-bg-green'>"+
                            "订单流水号 : <span style='font-weight: bold;'>"+res.orderNum+"</span><hr class='layui-bg-green'>"+
                            "预约时间 : <span style='font-weight: bold;'>"+res.appointmentTime+"</span><hr class='layui-bg-green'>" +
                            "上门回收时间 : <span style='font-weight: bold;'>"+res.collectionTime+"</span><hr class='layui-bg-green'>"+
                            "订单状态 : <span style='font-weight: bold;'>"+res.orderStatic+"</span><hr class='layui-bg-green'>"+
                            "盘点方式 : <span style='font-weight: bold;'>"+res.checkMethod+"</span><hr class='layui-bg-green'>"+
                            "是否有额外垃圾 : <span style='font-weight: bold;'>"+res.extraRubbish+"</span><hr class='layui-bg-green'>"+
                            "订单备注 : <span style='font-weight: bold;'>"+res.orderRemark+"</span><hr class='layui-bg-green'><br><br>"+
                            "订单所属业主 : <span style='font-weight: bold;'>"+res.user['userName']+"</span><hr class='layui-bg-green'>"+
                            "业主住址 : <span style='font-weight: bold;'>"+res.user['areaAddress']+res.user['detailedAddress']+res.user['floorUnit']+ "</span><hr class='layui-bg-green'>"+
                            "业主联系方式 : <span style='font-weight: bold;'>"+res.user['userPhone']+"</span><hr class='layui-bg-green'><br><br>"+
                            "订单所属员工 : <span style='font-weight: bold;'>"+res.employee['empName']+"</span><hr class='layui-bg-green'>"+
                            "员工联系方式 : <span style='font-weight: bold;'>"+res.employee['empPhone']+"</span><hr class='layui-bg-green'>"+
                            "</div>";
                    }
                    layer.open({
                        type : 1,
                        title : '订单详情',
                        area : ['800px','750px'],
                        content : orderDetail
                    })
                })
                break;
            //通过id删除用户
            case 'deleteOrderById':
                layer.confirm("确认删除 ID为 "+orderData.orderId+" 这条订单吗?", function(){
                    $.post('/system/order/deleteOrderById',orderData,function (res) {
                        if (res.code==200){
                            //无论删除成功还是失败都刷新表格
                            tableData.reload();
                            layer.msg(res.msg);
                        }else if (res.code==-1){
                            //无论删除成功还是失败都刷新表格
                            tableData.reload();
                            layer.msg(res.msg);
                        }
                    })
                });
                break;
            //删除事件结束

            //修改事件开始
            case 'editOrderById':
                //获取修改订单弹出层的索引
                var editIndex;
                //修改订单弹出层
                editIndex = layer.open({
                    type: 1,
                    title : '修改订单',
                    //content属性为打开某个定义好的
                    content: $('#editOrderDiv'),
                    area: ['800px', '450px'],
                    success:function(layer){
                        //防止打开弹窗后遮挡屏幕
                        var mask = $(".layui-layer-shade");
                        mask.appendTo(layer.parent());
                        //其中：layer是弹层的DOM对象
                        form.val('formData',orderData);
                    }
                });
                //监听订单修改事件
                form.on('submit(editSubmit)',function (orderData) {
                    layer.confirm("确认修改吗?",function () {
                        $.post('/system/order/editOrderById',orderData.field,function (res) {
                            if (res.code==200){
                                //无论修改成功还是失败都刷新表格
                                layer.close(editIndex);
                                tableData.reload();
                                layer.msg(res.msg);
                            }else if (res.code==-1){
                                //无论删除成功还是失败都刷新表格
                                layer.close(editIndex);
                                tableData.reload();
                                layer.msg(res.msg);
                            }
                        })
                    })
                    return false;
                })
                break;
            //修改订单事件结束
        }
    })
})